<template>
  <div class="home">
    <!-- 第一部分 -->
    <div class="onelayer">
      <div class="relative w-full h-[750px] z-1">
        <div class="w-full h-full flex flex-col items-center bg-black-25 pt-30">
          <h1 class="text-white text-8xl font-medium mt-20 drop-shadow-md">
            {{ bannerlist.slogan }}
          </h1>
          <div class="mt-9 relative search rounded">
            <div class="absolute left-0 leftVideoIco">
              <i class="iconfont">&#xe812;</i>视频
            </div>
            <div class="absolute right-0 searchBtn text-center">
              <button class="text-center" @click="detailSearch(searchval)">
                <img src="../assets/img/serachico.svg" class="w-7 h-7" />
              </button>
            </div>
            <input
              type="text"
              placeholder="输入关键词查询更多资源"
              v-model="searchval"
              style="width: 50%"
            />
          </div>
          <div class="mt-3 searchtag">
            <div class="dioa-flex flex text-white/60 justify-between w-full">
              <div class="dioa-flex flex space-x-1 pr-10 flex-wrap overflow-hidden">
                <a
                  @click="detailSearch(item.keyword)"
                  v-for="item in keywordList"
                  :key="item.id"
                  class="hover:no-underline hover:text-white cursor-pointer duration-300 px-2 py-[2px] hover:bg-black-25 rounded-md"
                >
                  {{ item.keyword }}
                </a>
              </div>
            </div>
          </div>
        </div>
        <div
          class="absolute w-full h-full -z-1 top-0 left-0 bottom-0 right-0 overflow-hidden"
        >
          <video
            :src="bannerlist.bannerVideoUrl"
            preload="auto"
            playsinline=""
            autoplay="autoplay"
            muted="muted"
            loop="loop"
            class="w-full h-full object-cover"
          ></video>
        </div>
      </div>
    </div>
    <!-- 第一部分end -->
    <!-- 第二部分 -->
    <section class="pt-20 w-full max-w-screen-xl px-11 mx-auto text-center space-y-12">
      <div class="space-y-5">
        <h2 class="text-7xl font-medium text-black">为什么选择嗨动视觉</h2>
        <p class="text-xl text-neutral-60">更专业 更可靠 , 我们的目标是客户成功</p>
      </div>
      <div class="swiperloop">
        <Swiper
          :modules="modules"
          @swiper="onSwiper"
          :slidesPerView="3"
          :navigation="navigation"
          :autoplay="{ delay: 2500, disableOnInteraction: true }"
          :loop="false"
          :space-between="15"
        >
          <swiper-slide v-for="item in materialIndexlist" :key="item.id">
            <ItemImg :item="item"></ItemImg>
          </swiper-slide>
        </Swiper>
        <!-- 左右按钮 -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
      </div>
    </section>
    <!-- 第二部分end -->
    <!-- 第三部分 -->
    <section class="pt-20 w-full max-w-screen-xl px-11 mx-auto text-center">
      <h2 class="text-7xl font-medium text-black">素材精选发现更多</h2>
      <div class="dioa-tabs__root mt-8">
        <div class="dioa-tabs__list flex space-x-6 justify-center">
          <button
            v-for="(item, index) in treeList"
            :key="index"
            :class="{ activetag: activeIndex === index }"
            class="dioa-tabs__tab flex items-center justify-center relative outline-none text-lg py-2 px-4 rounded-lg text-black bg-neutral-30 data-selected:text-white data-selected:bg-black data-selected:font-medium disabled:cursor-not-allowed disabled:opacity-40 disabled:text-current hover:bg-neutral-40 data-selected:hover:bg-black-80 transition"
            @click="selectTag(item, index)"
          >
            {{ item.name }}
          </button>
          <button
            class="dioa-tabs__tab flex items-center justify-center relative outline-none text-lg py-2 px-4 rounded-lg text-black bg-neutral-30 data-selected:text-white data-selected:bg-black data-selected:font-medium disabled:cursor-not-allowed disabled:opacity-40 disabled:text-current hover:bg-neutral-40 data-selected:hover:bg-black-80 transition"
            @click.prevent="clickMore"
          >
            更多
          </button>
        </div>
        <div
          class="video-card__list w-full grid gap-x-7 gap-y-8 grid-cols-[repeat(4,minmax(245px,1fr))] mt-12"
        >
          <div v-for="item in materialList" :key="item.id">
            <ItemImg :item="item"></ItemImg>
          </div>
        </div>
      </div>

      <div class="w-full flex justify-center pt-20 pb-35">
        <button
          type="button"
          @click.prevent="clickMore"
          class="dioa-button__root inline-flex appearance-none items-center justify-center select-none relative whitespace-nowrap align-middle transition outline-none cursor-pointer disabled:cursor-not-allowed data-loading:text-transparent h-14 w-[168px] text-lg font-medium text-black bg-neutral-30 hover:bg-neutral-40 active:bg-black active:text-white disabled:text-neutral-40 disabled:bg-neutral-30 rounded-full border-0"
        >
          查看更多
        </button>
      </div>
    </section>
    <!-- 第三部分end -->
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
import {
  getbannerlist,
  getkeywordList,
  getmaterialIndexlist,
  getTreeList,
  getmaterialList,
} from "../common/homeApi";
import ItemImg from "../components/ItemImg.vue";
import {
  bannerType,
  keywordListType,
  RListHdMaterialVo,
  ThreeModel,
  materialListModel,
} from "../common/utils/homeTpye";
import { Swiper, SwiperSlide } from "swiper/vue";
import SwiperCore, { Navigation, Pagination, Scrollbar, A11y } from "swiper";
import "swiper/css";
import "swiper/css/navigation"; // 轮播图两边的左右箭头
const navigation = ref({
  nextEl: ".swiper-button-next",
  prevEl: ".swiper-button-prev",
});
SwiperCore.use([Navigation]);
// 滚动插件
const modules = [Navigation, Pagination, Scrollbar, A11y];
const onSwiper = () => {};

// 获取banner
const bannerlist = ref<bannerType[] | any>([]);
getbannerlist().then((res) => {
  bannerlist.value = res.data[0];
});
// 获取关键词
const keywordList = ref<keywordListType | any>([]);
getkeywordList().then((res) => {
  keywordList.value = res.data;
});
// materialIndexlist获取网页滚动地址
const materialIndexlist = ref<RListHdMaterialVo | any>([]);
getmaterialIndexlist().then((res) => {
  // console.log(res.data);
  materialIndexlist.value = res.data;
});

// 获取首页分类列表ThreeModel
const activeIndex = ref(0);
const treeList = ref<ThreeModel | any>([]);
getTreeList().then((res) => {
  if (Array.isArray(res.data)) {
    const tempIndex = [{ id: null, name: "全部" }, ...res.data];
    treeList.value = tempIndex;
  }
});
// 获取首页分类素材
const materialList = ref<materialListModel | any>([]);
const selectTag = async (item: any, index: number) => {
  // console.log(index);
  activeIndex.value = index;
  getmaterialList(item.id).then((res) => {
    // console.log(res.rows);
    materialList.value = res.rows;
  });
};
// 默认选中第一个选项卡
selectTag({ id: null }, 0);

// 点击更多到列表
const router = useRouter();
function clickMore() {
  router.push("/list");
}
// 搜索
let searchval = ref("");
function detailSearch(str: string) {
  router.push("/list?param=" + str);
  // console.log(str);
}
</script>
<style lang="scss" scoped>
.search {
  width: 780px;
  background: #fff;
  height: 60px;
  line-height: 60px;

  input {
    margin: 0 120px 0 90px;
    height: 100%;
    height: 30px;
    line-height: 30px;
    border-left: 1px solid #efefef;
    padding: 0 20px;
  }

  .leftVideoIco {
    height: 60px;
    line-height: 60px;
    padding: 0 20px;
    font-size: 14px;

    i {
      padding-right: 5px;
    }
  }

  .searchBtn {
    width: 120px;

    button {
      background: #c40234;
      display: block;
      width: 100%;
      height: 60px;
      border-radius: 0 4px 4px 0;

      &:hover {
        background: linear-gradient(to right, #f96e92, #c40234);
      }

      img {
        filter: brightness(100);
        margin: auto;
      }
    }
  }
}

.searchtag {
  width: 700px;
  margin: 50px auto;
}

.hoverShowVideo {
  // .aspect-video{
  //   display: none;
  // }
  .imgshow {
    display: block;
  }

  &:hover {
    .aspect-video {
      display: block;
      animation: zoom 5s;
    }

    .imgshow {
      // display: none;
      animation: fadeOut 2s ease-in-out forwards;
    }
  }
}

/* 定义关键帧 */
@keyframes zoom {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.2);
    /* 放大到原来的1.5倍 */
  }

  100% {
    transform: scale(1);
  }
}

.activetag {
  background: #ededed;
}
.swiperloop {
  position: relative;
  padding: 0 50px;
  margin-bottom: 50px;
  .swiper-button-prev {
    color: #000;
  }
  .swiper-button-next {
    color: #000;
  }
  .swiper-button-disabled {
    opacity: 0.1;
  }
}
.activetag {
  background: #c40234;
  color: #fff;
  font-weight: bold;
}
</style>
